<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <title>Document</title>
    <script>
        wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '<?php echo $data["appid"];?>', // 必填，公众号的唯一标识
            timestamp: '<?php echo $data["timestamp"]; ?>', // 必填，生成签名的时间戳
            nonceStr: '<?php echo $data["noncestr"]; ?>', // 必填，生成签名的随机串
            signature: '<?php echo $data["sign"];?>',// 必填，签名
            jsApiList: [
                'onMenuShareAppMessage',
                'onMenuShareTimeline',
                'chooseImage',
                'previewImage',
                'uploadImage',
                'downloadImage',
                'startRecord',
                'stopRecord',
                'playVoice',
                'pauseVoice',
                'stopVoice',
                'onVoiceRecordEnd',
                'uploadVoice',
                'downloadVoice',
                'translateVoice',
                'getNetworkType',
                'openLocation',
                'getLocation',
                'closeWindow',
                'hideMenuItems',
                'hideAllNonBaseMenuItem',
                'showAllNonBaseMenuItem',
                'scanQRCode',
            ] // 必填，需要使用的JS接口列表
        });
        wx.ready(function() {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            // 要隐藏的菜单栏
            // wx.hideMenuItems({
            //     menuList: [
            //         "menuItem:share:timeline"
            //     ] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
            // });
            // 隐藏所有的非基础的菜单栏
            // wx.hideAllNonBaseMenuItem();
            //显示所有的功能按钮接口
            wx.showAllNonBaseMenuItem();

            // 调用地图接口
            // wx.getLocation({
            //     type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            //     success: function (res) {
            //         var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
            //         var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
            //         var speed = res.speed; // 速度，以米/每秒计
            //         var accuracy = res.accuracy; // 位置精度
            //         // alert(latitude)
            //         // alert(longitude)
            //         // alert(speed)
            //         // alert(accuracy)
            //         wx.openLocation({
            //             latitude: latitude, // 纬度，浮点数，范围为90 ~ -90
            //             longitude: longitude, // 经度，浮点数，范围为180 ~ -180。
            //             name: '随便写的', // 位置名
            //             address: '我怎么知道', // 地址详情说明
            //             scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
            //             infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
            //         });
            //     }
            // });
            // 分享给朋友
            wx.onMenuShareAppMessage({
                title: '后盾人，人人做后盾', // 分享标题
                desc: '我是随便，我想写啥，我就写啥，哈哈哈哈哈', // 分享描述
                link: '<?php echo $data['url'];?>', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532961771977&di=4a96986e545443c00a624c276b5a6d19&imgtype=0&src=http%3A%2F%2Fpicture.ik123.com%2Fuploads%2Fallimg%2F170310%2F3-1F310112421.jpg', // 分享图标
                success: function () {
// 用户点击了分享后执行的回调函数
                }
            });
            // 分享到朋友圈
            //wx.onMenuShareTimeline({
            //    title: '后盾人，人人做后盾', // 分享标题
            //    // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            //    imgUrl: 'https://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&word=%E9%A3%8E%E6%99%AF&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=-1&cs=1499450358,193750577&os=49061892,1317189024&simid=0,0&pn=66&rn=1&di=88619873320&ln=1967&fr=&fmq=1532952589986_R&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=1e&objurl=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fb%2F579acbc8c5ad9.jpg&rpstart=0&rpnum=0&adpicid=0', // 分享图标
            //    success: function () {
            //        // 用户点击了分享后执行的回调函数
            //    },
            //});


        });
    </script>
</head>
<body>

<!--图像文字接口测试开始-->
    <h1>我是分享的页面</h1>
    <span class="paizhao" onclick="paizhao()">我要拍照</span>
    <img src="" class="zhaopian" style="width: 100%;">
    <p>下面的照片墙</p>
    <div class="qiang">
    </div>
<!--图像文字接口测试结束-->


<!--音频接口测试开始-->
    <h3 onclick="luyin()">点我录音</h3>
    <h3 onclick="haha()">停止录音</h3>
    <h3 onclick="zanting()">暂停播放</h3>
    <h3 onclick="bofang()">播放语音</h3>
    <h3 onclick="stop()">停止播放</h3>
    <h3 onclick="shibie()">识别语音文字</h3>
<!--音频接口测试结束-->

<!--设备信息测试开始-->
    <p onclick="net()">点我查看网络</p>

<!--关闭当前网页窗口-->
    <h2 style="color: red" onclick="close()">关闭窗口</h2>

<!--微信扫一扫-->
    <h3 onclick="sao()">扫一扫</h3>

</body>
<script>

    //因为这些功能需要用户点击才能生效，所以我们把它写到ready方法外面，ready方法里边的会自动执行
    //+++++++++++++++++++++++++++++++图片接口测试+++++++++++++++++++++++++++++//
    $(function () {
        var urls = [
            'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1417302094,2168719493&fm=27&gp=0.jpg',
            'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1441060208,382605833&fm=27&gp=0.jpg',
            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1218658302,3556024496&fm=27&gp=0.jpg',
            'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=318969663,4254793838&fm=27&gp=0.jpg'
        ];
        var html = '';
        for (var i = 0; i < urls.length;i++){
            html += '<img src="'+urls[i]+'" onclick="chakan(this)" style="width:100%;">';
        }
        $('.qiang').html(html);
    })
    function paizhao() {
        //图像接口
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                //设置某个图片的src属性
                // $('.zhaopian').attr('src',localIds);

                // 上传图片
                wx.uploadImage({
                    localId: localIds.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {
                        var serverId = res.serverId; // 返回图片的服务器端ID
                        wx.downloadImage({
                            serverId: serverId, // 需要下载的图片的服务器端ID，由uploadImage接口获得
                            isShowProgressTips: 1, // 默认为1，显示进度提示
                            success: function (res) {
                                var localId = res.localId; // 返回图片下载后的本地ID
                                // alert(图片下载成功)
                                // $('.zhaopian').attr('src',localIds);
                                $('.zhaopian').attr('src',localId);
                            }
                        });
                    }
                });
            }
        });
    }
    function chakan(el) {
        var urls = [
            'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1417302094,2168719493&fm=27&gp=0.jpg',
            'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1441060208,382605833&fm=27&gp=0.jpg',
            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1218658302,3556024496&fm=27&gp=0.jpg',
            'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=318969663,4254793838&fm=27&gp=0.jpg'
        ];
        //获取当前点击的图片的src属性值
        var src = $(el).attr('src');
        wx.previewImage({
            current: src, // 当前显示图片的http链接
            urls: urls // 需要预览的图片http链接列表
        });
    }
    //+++++++++++++++++++++++++++++++图像接口测试结束+++++++++++++++++++++++++++//

    //++++++++++++++++++++++++++++音频接口测试开始+++++++++++++++++++++++++++++++//
    //指定录音的id，我录好音之后，该播放哪段录音，所以需要我们指定录音的id为全局变量
    var yuyin = '';
    function luyin() {
        wx.startRecord();
    }
    function haha() {
        wx.stopRecord({
            success: function (res) {
               yuyin = res.localId;
                // wx.playVoice({
                //     localId: yuyin // 需要播放的音频的本地ID，由stopRecord接口获得
                // });
                //上传语音
                wx.uploadVoice({
                    localId: yuyin, // 需要上传的音频的本地ID，由stopRecord接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {
                        var serverId = res.serverId; // 返回音频的服务器端ID
                        wx.downloadVoice({
                            serverId: serverId, // 需要下载的音频的服务器端ID，由uploadVoice接口获得
                            isShowProgressTips: 1, // 默认为1，显示进度提示
                            success: function (res) {
                                var localId = res.localId; // 返回音频的本地ID
                                wx.playVoice({
                                    localId: localId // 需要播放的音频的本地ID，由stopRecord接口获得
                                });
                            }
                        });
                    }
                });
            }
        });
    }
    function zanting() {
        wx.pauseVoice({
            localId: yuyin // 需要暂停的音频的本地ID，由stopRecord接口获得
        });
    }
    function bofang() {
        wx.playVoice({
            localId: yuyin // 需要播放的音频的本地ID，由stopRecord接口获得
        });
    }
    function stop() {
        wx.stopVoice({
            localId: yuyin // 需要停止的音频的本地ID，由stopRecord接口获得
        });
    }
    function shibie() {
        wx.translateVoice({
            localId: yuyin, // 需要识别的音频的本地Id，由录音相关接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {
                alert(res.translateResult); // 语音识别的结果
            }
        });
    }
    //+++++++++++++++++++++++++++++音频接口测试结束++++++++++++++++++++++++++++++//
    
    //+++++++++++++++++++++++设备信息测试+++++++++++++++++++++++++//
    function net() {
        wx.getNetworkType({
            success: function (res) {
                var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
            }
        });
    }
    //++++++++++++++++++++++设备信息测试结束++++++++++++++++++++++//

    
    //++++++++++++++++++++++++++界面操作+++++++++++++++++++++++++//
    function close() {
        wx.closeWindow();
    }
    //++++++++++++++++++++++++++界面操作结束++++++++++++++++++++++//

    // 扫一扫
    function sao() {
        wx.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success: function (res) {
                var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                alert(result);
            }
        });
    }

</script>

</html>